<template>
  <div class="mui-pages">
    <header class="mui-bar mui-bar-nav flex-justify-start">
      <a @click="fn.back()" href="javascript:void(0)"
        ><img class="back-btn" src="../../../../static/images/back.png"
      /></a>
      <h1 class="mui-title">组织生活记录</h1>
    </header>

    <div class="mui-page-content">
      <div class="mui-scroll-wrapper">
        <div class="mui-scroll">
          <div class="statistics-header">
            <h4>{{ data.partyGroupName }}</h4>
            <div class="time-line flex-center">
              <div class="message-line"></div>
              <div
                @click="showTimePicker()"
                id="recordYyear"
                class="year-btn flex-center"
              >
                <span id="recordTimes">{{ year }}</span
                >年
                <img
                  class="arrow_icon"
                  src="../../../../static/images/select_down.png"
                />
              </div>
              <div class="message-line"></div>
            </div>
            <div class="flex-center">
              <div class="flex-center work-message-item-tab">
                <div class="flex-column flex-center">
                  <p>应开展会议次数</p>
                  <p class="work-red">{{ data.shouldCount }}次</p>
                </div>
              </div>
              <div class="flex-center work-message-item-tab">
                <div class="flex-column flex-center">
                  <p>已开展会议次数</p>
                  <p class="work-blue">{{ data.alreadyCount }}次</p>
                </div>
              </div>
            </div>
          </div>
          <div class="work-message-item-header">
            <h3>{{ data.typeLabel }}记录</h3>
          </div>

          <div class="mui-table-view organization-lists">
            <cube-scroll
              ref="scroll"
              :options="options"
              @pulling-up="onPullingUp"
            >
              <cube-swipe>
                <transition-group name="swipe" tag="div">
                  <div
                    class="mui-table-view-cell"
                    v-for="(data, index) in swipeData"
                    :key="data.id"
                  >
                    <cube-swipe-item
                      ref="swipeItem"
                      :btns="data.btns"
                      :index="index"
                      :class="{ 'swiper-no-swiping': true }"
                      @btn-click="edit(data)"
                    >
                      <div @click="detail(data)">
                        <div class="mui-slider-handle">
                          <div class="mine-lists-content flex-between-center">
                            <div class="statistics-lists">
                              <h2 class="organization-lists-title">
                                会议主题：{{ data.subject }}
                              </h2>
                              <div class="organization-lists-time">
                                <span
                                  >{{
                                    fn.formatDate(data.meetTime)
                                  }}&nbsp;创建人：{{ data.createByName }}</span
                                >
                              </div>
                            </div>
                            <span class="mui-icon mui-icon-arrowright"></span>
                          </div>
                        </div>
                      </div>
                    </cube-swipe-item>
                  </div>
                </transition-group>
              </cube-swipe>
              <!-- <div class="text-center no-data" v-if="swipeData.length === 0">
                <img src="../../../../static/images/no_data.png" alt="" />
                <p>暂无数据</p>
              </div> -->
              <!-- W noData -->
              <noData v-if="swipeData.length === 0"></noData>
              <onBottom v-else-if="onBottom"></onBottom>
            </cube-scroll>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import footerbar from "../common/footerbar.vue";
import tools from "@/utils/tools";
import loginService from "@/service/loginService";
import moment from "moment";
export default {
  components: {
    footerbar,
  },
  name: "",
  data() {
    return {
      fn: tools,
      options: {
        pullUpLoad: true,
        scrollbar: false,
      },
      onBottom: false, // W onBottom
      objectsName: "",
      swipeData: [],
      infinite: true,
      data: {},
      pageIndex: 0,
      datePicker: "",
      year: new Date().getFullYear(),
    };
  },
  created() {
    this.resumeData();
    this.loadData();
  },
  methods: {
    fetchDataById(pkId) {
      return loginService.getPubsherMeetingInfoByPkId(pkId).then((res) => {
        if (res.code !== 200) {
          tools.tip(
            res.describe === "未查询到资源" ? "已无更多数据" : res.describe
          );
          return false;
        }
        return res.data.insPartyMeetingResponseModel;
      });
    },
    edit(data) {
      this.fetchDataById(data.id).then((scheduleEditData) => {
        if (!scheduleEditData) {
          return false;
        }
        this.$store.state.scheduleEditData = scheduleEditData;
        this.$router.push({ path: `/scheduleEdit/${data.id}` });
      });
    },
    resumeData() {
      this.data = this.$store.state.recordListData;
      this.year = this.data.year || new Date().getFullYear();
      console.log(this.data);
    },
    detail(data) {
      this.$store.state.recordDetailtabIndex = 0;
      this.$store.state.scheduleData = data;
      this.$router.push({ path: `/recordDetail/${data.id}` });
    },
    showTimePicker() {
      if (!this.datePicker) {
        let me = this;
        let nowYear = new Date().getFullYear();
        this.datePicker = this.$createDatePicker({
          columnCount: 1,
          min: new Date(nowYear - 10, 1, 1),
          max: new Date(nowYear + 1, 1, 1),
          value: new Date(me.year, 1, 1),
          onSelect: (selectedTime, selectedText, formatedTime) => {
            this.year = new Date(selectedTime).getFullYear();
            this.reloadData();
          },
        });
      }
      this.datePicker.show();
      setTimeout(() => {
        this.datePicker.$updateProps({
          value: new Date(this.year, 1, 1),
        });
      }, 1000);
    },
    onPullingUp() {
      console.log("onPullingUp");
      this.loadData();
    },
    reloadData() {
      this.pageIndex = 0;
      this.swipeData = [];
      this.loadData();
    },
    loadData() {
      console.log(this.data.type);
      let data = {
        year: this.year,
        pageIndex: this.pageIndex,
        type: this.data.type,
        partyGroupId: this.data.partyGroupId,
        status: "3",
      };
      loginService.getPartyMeetingAndPlanPage(data).then((res) => {
        if (res.code === 200 && res.data.list.length < 1) {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate();
          return tools.tip("已无更多数据");
        }
        // res.data.list.forEach((v, i) => {
        //   v.btns = [
        //     {
        //       action: 'delete',
        //       text: '修改',
        //       color: '#f0ad4e'
        //     }
        //   ]
        // })
        this.pageIndex++;
        this.swipeData = this.swipeData.concat(res.data.list);
        setTimeout(() => {
          this.$refs.scroll.forceUpdate &&
            this.$refs.scroll.forceUpdate(true, false);
          this.options.isPullUpLoad = false;
        }, 100);
      });
    },
    //      loadData () {
    //        let data = {
    //          year: this.year + '',
    //          meetTime: {
    //            year: this.year + ''
    //          },
    //          pageIndex: this.pageIndex,
    //          pageSize: '1000'
    //        }
    //        loginService.getAllCurrUserAttendPartyMeetingPage(data).then((res) => {
    //          if (res.code === 200 && res.data.length < 1) {
    //            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate()
    //            return tools.tip('已无更多数据')
    //          }
    //          res.data.forEach((v, i) => {
    //            v.btns = [
    //              {
    //                action: 'delete',
    //                text: '修改',
    //                color: '#f0ad4e'
    //              }
    //            ]
    //          })
    //          this.pageIndex ++
    //          this.swipeData = this.swipeData.concat(res.data)
    //          setTimeout(() => {
    //            this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
    //            this.options.isPullUpLoad = false
    //          }, 100)
    //        })
    //      },
  },
};
</script>
<style scoped="" lang="scss">
.swiper-no-swiping {
  transform: translateX(0) !important;
}
</style>
